<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../application.css">
    <style>
        ul{
            padding-top:50px;
            padding-bottom:50px;
            border-bottom:2px dashed #87BF34;
        }
        .contain{
            width:700px;
            margin:0 auto;
        }
        h1{
            margin:20px auto;
            font-weight: 300;
            color:red;
            font-size:20px !important;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="contain">
    <div class="block">
        <div class="block-content">
            <h1>1,左图右文<br>
                  样式：content-50
            </h1>
            <ul class="content-50">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/1.jpg">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">金山词霸</p>
                            <p class="p2">
                                <span>大小:</span>
                                <span>44.5MB</span>
                            </p>
                            <p class="p3">
                                <span>人气:1123</span>
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>2,左图右文,点击下载<br>
                样式：content-51
            </h1>
            <ul class="content-51">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">金山词霸</p>
                            <p class="p2">
                                <span>大小:</span>
                                <span>44.5MB</span>
                            </p>
                            <p class="p3">
                                立即下载
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>3,左中右结构<br>
                样式：content-52
            </h1>
            <ul class="content-52">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">金山词霸</p>
                            <p class="p2">
                                <span>大小:</span>
                                <span>44.5MB</span>
                            </p>
                            <p class="p3">
                                <span>人气:1123</span>
                            </p>
                        </div>
                        <div class="content-right pull-left">
                            <p class="p1">
                                详情
                            </p>
                            <p class="p2">
                                下载
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>4,左图右文,两行显示<br>
                样式：content-53
            </h1>
            <ul class="content-53">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">金山词霸</p>
                            <p class="p2">
                                我听见雨落在轻轻草地，我听见远方下课钟声想起，为什么没有听到你的声音，认真呼唤我姓名
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>5,上下结构，上标题，下分左图右文<br>
                样式：content-54
            </h1>
            <ul class="content-54">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <h3>也许当时忙着微笑</h3>
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p2">
                                我听见雨落在轻轻草地，我听见远方下课钟声想起，为什么没有听到你的声音，认真呼唤我姓名
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>6,上下结构,上面标题，下分左中右<br>
                样式：content-55
            </h1>
            <ul class="content-55">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <h3>也许当时忙着微笑</h3>
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">
                                正品推荐
                            </p>
                            <p class="p2">
                                我听见雨落在轻轻草地，我听见远方下课钟声想起，为什么没有听到你的声音，认真呼唤我姓名
                            </p>
                        </div>
                        <div class="content-right pull-left">
                            <p class="p1">
                                立即下载
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>7,左中右<br>
                样式：content-56
            </h1>
            <ul class="content-56">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">
                                <span class="span1">正品推荐</span>
                                <span class="span2 pull-right">分类:赛车酷跑</span>
                                <span class="span3 pull-right">日期:1999-1-1</span>
                            </p>
                            <p class="p2">
                                我听见雨落在轻轻草地，我听见远方下课钟声想起，为什么没有听到你的声音，认真呼唤我姓名
                            </p>
                        </div>
                        <div class="content-right pull-left">
                            <p class="p1">
                                立即下载
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>8,左中右<br>
                样式：content-57
            </h1>
            <ul class="content-57">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <h3>金山词霸</h3>
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">金山词霸</p>
                            <p class="p2">
                                <span>大小:</span>
                                <span>44.5MB</span>
                            </p>
                            <p class="p3">
                                <span>人气:1123</span>
                            </p>
                        </div>
                        <div class="content-right pull-left">
                            <p class="p1">
                                软件分类:赛车
                            </p>
                            <p class="p2">
                                软件大小:100M
                            </p>
                            <p class="p3">
                                软件类型:window
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>9,上图下文<br>
                样式：content-58
            </h1>
            <ul class="content-58 clearfix">
                <li class="content pull-left">
                    <a href="#" target="_blank">
                        <div class="content-top">
                            <img src="/src/component/xht/images/2.png">
                            <span>王泽荣耀</span>
                        </div>
                    </a>
                </li>
                <li class="pull-left content">
                    <a href="#" target="_blank">
                        <div class="content-top">
                            <img src="/src/component/xht/images/2.png">
                            <span>王泽荣耀</span>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>10,有序列表<br>
                样式：content-59
            </h1>
            <ul class="content-59">
                <li class="content">
                    <a href="#" target="_blank">
                        1.最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
                <li class="content">
                    <a href="#" target="_blank">
                        2.最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
            </ul>
            <h1>11,带点的列表<br>
                样式：content-60
            </h1>
            <ul class="content-60">
                <li class="content">
                    <a href="#" target="_blank">
                        <span>•</span>
                        最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
                <li class="content">
                    <a href="#" target="_blank">
                        <span>•</span>
                        最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
            </ul>
            <h1>12,列表<br>
                样式：content-61
            </h1>
            <ul class="content-61">
                <li class="content">
                    <span class="num num1">1</span>
                    <a href="#" target="_blank">
                        最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
                <li class="content">
                    <span class="num num2">2</span>
                    <a href="#" target="_blank">
                        最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
                <li class="content">
                    <span class="num num3">3</span>
                    <a href="#" target="_blank">
                        最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
                <li class="content">
                    <span class="num num4">4</span>
                    <a href="#" target="_blank">
                        最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
                <li class="content">
                    <span class="num num5">5</span>
                    <a href="#" target="_blank">
                        最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                    </a>
                </li>
            </ul>
            <h1>13,左中右<br>
                样式：content-62
            </h1>
            <ul class="content-62">
                <li class="content clearfix">
                    <a href="#"  target="_blank" class="a1">
                        <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                    </a>
                    <a href="//188soft.test.zhuazi.com/" target="_blank" class="a2">聊天软件</a>
                    <span class="span1">|</span>
                    <a href="#" target="_blank" class="a3">QQ2017</a>
                    <span class="time">2017-04-27</span>
                </li>
                <li class="content clearfix">
                    <a href="#"  target="_blank" class="a1">
                        <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                    </a>
                    <a href="//188soft.test.zhuazi.com/" target="_blank" class="a2">聊天软件</a>
                    <span class="span1">|</span>
                    <a href="#" target="_blank" class="a3">QQ2017</a>
                    <span class="time">2017-04-27</span>
                </li>
            </ul>
            <h1>14,左右<br>
                样式：content-63
            </h1>
            <ul class="content-63">
                <li class="content clearfix">
                    <a href="#"  target="_blank" class="a1">
                        <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                        <span>QQ2017</span>
                        <span class="time">2017-04-27</span>
                    </a>
                </li>
                <li class="content clearfix">
                    <a href="#"  target="_blank" class="a1">
                        <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                        <span>QQ2017</span>
                        <span class="time">2017-04-27</span>
                    </a>
                </li>
            </ul>
            <h1>15.分类模块<br>
                样式：content-64
            </h1>
            <ul class="content-64">
                <li class="content clearfix">
                    <div class="content-top">
                        <a href="#"  target="_blank" class="a1">
                            <em></em>
                            <span>网络软件</span>
                        </a>
                    </div>
                    <div class="content-bottom">
                        <a href="#"  target="_blank" class="a2">网页浏览</a>
                        <a href="#"  target="_blank" class="a2">网页浏览</a>
                        <a href="#"  target="_blank" class="a2">网页浏览</a>
                        <a href="#"  target="_blank" class="a2">网页浏览</a>
                        <a href="#"  target="_blank" class="a2">网页浏览</a>
                        <a href="#"  target="_blank" class="a2">网页浏览</a>
                    </div>
                </li>
            </ul>
            <h1>16.显示隐藏<br>
                样式：content-65
            </h1>
            <ul class="content-65 content-ul">
                <li class="content clearfix content-li">

                    <div class="content-top">
                        <a href="#" target="_blank">
                            <span>•</span>
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom ">
                        <a href="" target="_blank">
                            <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                            <p> 最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.</p>
                        </a>
                    </div>

                </li>
                <li class="content clearfix content-li">
                    <div class="content-top">
                        <a href="#" target="_blank">
                            <span>•</span>
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom ">
                        <a href="" target="_blank">
                            <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                            <p> 最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.</p>
                        </a>
                    </div>
                </li>
                <li class="content clearfix content-li">
                    <div class="content-top">
                        <a href="#" target="_blank">
                            <span>•</span>
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom ">
                        <a href="" target="_blank">
                            <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                            <p> 最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.</p>
                        </a>
                    </div>
                </li>
                <li class="content clearfix content-li">
                    <div class="content-top">
                        <a href="#" target="_blank">
                            <span>•</span>
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom ">
                        <a href="" target="_blank">
                            <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                            <p> 最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.</p>
                        </a>
                    </div>
                </li>
                <li class="content clearfix content-li">
                    <div class="content-top">
                        <a href="#" target="_blank">
                            <span>•</span>
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    <div class="content-bottom ">
                        <a href="" target="_blank">
                            <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                            <p> 最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.</p>
                        </a>
                    </div>
                    </div>
                </li>
                <li class="content clearfix content-li">
                    <div class="content-top">
                        <a href="#" target="_blank">
                            <span>•</span>
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom ">
                        <a href="" target="_blank">
                            <img src="/src/component/xht/images/3.jpg" alt="QQ2017">
                            <p> 最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.</p>
                        </a>
                    </div>
                </li>
            </ul>
            <h1>17.带序号的显示隐藏<br>
                样式：content-66
            </h1>
            <ul class="content-66 content-hover">
                <li class="content on">
                    <div class="content-top">
                        <span class="num num1">1</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                            <div class="content-bottom-2">
                                <p class="p1">2345万次下载</p>
                                <p class="p2">立即下载</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li class="content">
                    <div class="content-top">
                        <span class="num num2">2</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                            <div class="content-bottom-2">
                                <p class="p1">2345万次下载</p>
                                <p class="p2">立即下载</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li class="content">
                    <div class="content-top">
                        <span class="num num3">3</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                            <div class="content-bottom-2">
                                <p class="p1">2345万次下载</p>
                                <p class="p2">立即下载</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li class="content">
                    <div class="content-top">
                        <span class="num num4">4</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                            <div class="content-bottom-2">
                                <p class="p1">2345万次下载</p>
                                <p class="p2">立即下载</p>
                            </div>
                        </a>
                    </div>
                </li>
                <li class="content">
                    <div class="content-top">
                        <span class="num num5">5</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静 最怕朋友突然的关心 最怕回忆 突然翻滚绞痛着 不平息 最怕突然 听到你的消息 想念如果会.
                        </a>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                            <div class="content-bottom-2">
                                <p class="p1">2345万次下载</p>
                                <p class="p2">立即下载</p>
                            </div>
                        </a>
                    </div>
                </li>
            </ul>
            <h1>18.显示隐藏，分左中右结构<br>
                样式：content-67
            </h1>
            <ul class="content-67 content-hover">
                <li class="content on">
                    <div class="content-top">
                        <span class="num num1">1</span>
                        <span class="time">04-17</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静
                        </a>
                        <p class="pull-right">
                            <i class="iconfont icon-huo"></i>
                            <span>1111</span>
                        </p>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                        </a>
                        <div class="content-bottom-2">
                            <p class="p1">模拟经营<span>|</span>82.41MB</p>
                            <p class="p1">win7,win8,win10</p>
                        </div>
                        <a href="" class="xiazai">
                            直接下载
                        </a>
                        <a href="" class="xiazai">
                            进入下载
                        </a>
                    </div>
                </li>
                <li class="content ">
                    <div class="content-top">
                        <span class="num num2">2</span>
                        <span class="time">04-17</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静
                        </a>
                        <p class="pull-right">
                            <i class="iconfont icon-huo"></i>
                            <span>1111</span>
                        </p>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                        </a>
                        <div class="content-bottom-2">
                            <p class="p1">模拟经营<span>|</span>82.41MB</p>
                            <p class="p1">win7,win8,win10</p>
                        </div>
                        <a href="" class="xiazai">
                            直接下载
                        </a>
                        <a href="" class="xiazai">
                            进入下载
                        </a>
                    </div>
                </li>
                <li class="content ">
                    <div class="content-top">
                        <span class="num num3">3</span>
                        <span class="time">04-17</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静
                        </a>
                        <p class="pull-right">
                            <i class="iconfont icon-huo"></i>
                            <span>1111</span>
                        </p>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                        </a>
                        <div class="content-bottom-2">
                            <p class="p1">模拟经营<span>|</span>82.41MB</p>
                            <p class="p1">win7,win8,win10</p>
                        </div>
                        <a href="" class="xiazai">
                            直接下载
                        </a>
                        <a href="" class="xiazai">
                            进入下载
                        </a>
                    </div>
                </li>
                <li class="content ">
                    <div class="content-top">
                        <span class="num ">4</span>
                        <span class="time">04-17</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静
                        </a>
                        <p class="pull-right">
                            <i class="iconfont icon-huo"></i>
                            <span>1111</span>
                        </p>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                        </a>
                        <div class="content-bottom-2">
                            <p class="p1">模拟经营<span>|</span>82.41MB</p>
                            <p class="p1">win7,win8,win10</p>
                        </div>
                        <a href="" class="xiazai">
                            直接下载
                        </a>
                        <a href="" class="xiazai">
                            进入下载
                        </a>
                    </div>
                </li>
                <li class="content ">
                    <div class="content-top">
                        <span class="num ">5</span>
                        <span class="time">04-17</span>
                        <a href="#" target="_blank">
                            最怕空气突然安静
                        </a>
                        <p class="pull-right">
                            <i class="iconfont icon-huo"></i>
                            <span>1111</span>
                        </p>
                    </div>
                    <div class="content-bottom clearfix">
                        <a href="" target="_blank">
                            <div class="content-bottom-1">
                                <img src="/src/component/xht/images/1.jpg" alt="">
                            </div>
                        </a>
                        <div class="content-bottom-2">
                            <p class="p1">模拟经营<span>|</span>82.41MB</p>
                            <p class="p1">win7,win8,win10</p>
                        </div>
                        <a href="" class="xiazai">
                            直接下载
                        </a>
                        <a href="" class="xiazai">
                            进入下载
                        </a>

                    </div>
                </li>
            </ul>
            <h1>19.图文结合<br>
                样式：content-68
            </h1>
            <ul class="content-68">
                <li>
                    <div class="block-text-mask-110">
                        <a href="#">
                            <img src="http://img.51xiazai.cn/d/file/20170604/593424ba89c4e308001496589498.jpg">
                            <p>突然好想你</p>
                        </a>
                    </div>
                </li>
                <li>
                    <div class="block-text-mask-110">
                        <a href="#">
                            <img src="http://img.51xiazai.cn/d/file/20170604/593424ba89c4e308001496589498.jpg">
                            <p>突然好想你</p>
                        </a>
                    </div>
                </li>

            </ul>
            <h1>20.左图右文<br>
                样式：content-69
            </h1>
            <ul class="content-69">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p2">
                                我听见雨落在轻轻草地，我听见远方下课钟声想起，为什么没有听到你的声音，认真呼唤我姓名
                            </p>
                            <p class="p3">
                               2017-09-20
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>21.左中右<br>
                样式：content-70
            </h1>
            <ul class="content-70">
                <li class="clearfix content">
                    <a href="#" target="_blank">
                        <div class="content-left pull-left">
                            <img src="/src/component/xht/images/2.png">
                        </div>
                        <div class="content-middle pull-left">
                            <p class="p1">金山词霸2016专业版</p>
                            <p class="p2">
                                <span>44.5MB</span>
                            </p>
                        </div>
                        <div class="content-right pull-left">
                            <p class="p2">
                                下载
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
            <h1>22.左中右<br>
                样式:content-71
            </h1>
            <ul class="content-71">
                <li class="content">
                    <div class="content-top clearfix">
                       <div class="content-top-1 pull-left">
                           <a href="#" target="_blank">剪刀石头布游戏最新版</a>
                       </div>
                        <div class="content-top-2 pull-right">
                          <span class="span1">浏览量:</span>
                          <span class="span2">2220次</span>
                          <span class="span3">标签:</span>
                          <span class="span4">益智 游戏 </span>
                          <span class="span5">用户评论:</span>
                          <span class="span6">256条</span>
                        </div>
                    </div>
                    <div class="content-bottom">
                        <div class="content-bottom-1 pull-left">
                            <a href="#">
                                <img src="/src/component/xht/images/2.png" alt="">
                            </a>
                        </div>
                        <div class="content-bottom-2 pull-left">
                            <p class="p1">
                                <span class="span1">更新时间：2016-09-09</span>
                                <span class="span2">大小：6.4MB</span>
                                <i></i>
                                <span class="span3">免费软件</span>
                                <span class="span4">中文</span>
                            </p>
                            <p class="p2">突然好想你，你会在哪里过的快乐和委屈突然好想你，突然锋利的回忆你会在哪里过的快乐和委屈突然好想你，突然锋利的回忆，突然模糊的眼睛，突然模糊的眼睛,你会在哪里过的快乐和委屈突然好想你，突然锋利的回忆，突然模糊的眼睛</p>
                        </div>
                        <div class="content-bottom-3 pull-right">
                            <a href="#" target="_blank">安全下载</a>
                        </div>
                    </div>
                </li>
            </ul>
            <h1>23.评论<br>
                样式：block-51softDetail-4
            </h1>
            <div class="block width-826 block-51softDetail-4 marginTop-15" id="pinglun">
                <div class="block-title blockTit-ztdetail-1">
                    <h5>网友评论</h5>
                </div>
                <div class="block-content">
                    <form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)">
                        <div style="display:none;"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /></div>
                        <div class="text-area">
                            <textarea name="saytext" id="saytext"></textarea>
                        </div>
                        <div class="submit-evaluation clearfix">
                            <input type="image" name="imageField" class="pinglun pull-right" value="发表评论">
                        </div>
                        <input name="id" type="hidden" id="id" value="79296" />
                        <input name="classid" type="hidden" id="classid" value="26" />
                        <input name="enews" type="hidden" id="enews" value="AddPl" />
                        <input name="repid" type="hidden" id="repid" value="0" />
                        <input type="hidden" name="ecmsfrom" value="/pcgame/dz/79296.html">
                    </form>

                    <div class="evaluation-list">
                        <div class="tit-box">
                            <p>最新评论</p>
                        </div>
                        <ul>
                            <li class="content-evaluation">
                                <p class="clearfix count">
                                    <span class="pull-left">1楼</span>
                                    <span class="pull-right">2017-05-23 01:29:30</span>
                                </p>
                                <p class="content">188软件园是个新站吧，没听说过，这款《最终测试》正式版还挺好用的</p>
                            </li>
                            <li class="content-evaluation">
                                <p class="clearfix count">
                                    <span class="pull-left">2楼</span>
                                    <span class="pull-right">2017-05-07 16:19:45</span>
                                </p>
                                <p class="content">刚下载《最终测试》正式版时不太会用，不过上网查了一下之后，完美搞定。</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="../../src/federal/js/vendors/jquery-1.10.2/jquery.js"></script>
<script>
    $(".content-ul .content-li").mouseover(function (){
        $(".content-ul .content-li").children(".content-top").show();
        $(".content-ul .content-li").children('.content-bottom').hide();
        $(this).children(".content-bottom").show();
        $(this).children('.content-top').hide();
    }).mouseout(function() {
        $(this).children(".content-bottom").show();
        $(this).children('.content-top').hide();
    });
    $(".content-ul .content-li").eq(0).mouseover();


    $(".content-hover>.content").on("mouseenter",function(){
        $(this).addClass("on").children(".content-bottom").css("display", "block");
        $(this).siblings().removeClass("on").children(".content-bottom").css("display", "none");
    }).on("mouseleave", function () {
        $(this).removeClass("on").children(".content-bottom").css("display", "none");
        $(this).eq(0).addClass("on").children(".content-bottom").css("display", "block");
    });





</script>
</body>
</html>